<template>
  <div>
    <Row>
      <i-col span='24'>
        <Alert type='error' v-if='errMsg.show'>{{errMsg.msg}}</Alert>
      </i-col>
      <i-col span='24'>
        <Row>
          <i-col span='12'>
            <p>姓名：{{cardInfo.Name}}</p>
            <p>性别：{{cardInfo.Sex}}</p>
            <p>民族：{{cardInfo.Nation}}</p>
            <p>身份证号：{{cardInfo.IDNumber}}</p>
            <p>地址：{{cardInfo.Address}}</p>
          </i-col>
          <i-col span='12'>
            <img :src='base64'>
          </i-col>
        </Row>
      </i-col>
      <i-col span='3'>
      </i-col>
      <i-col span='12'>
        <Button type='primary' :loading='loading' @click='readIdcardInfo'>
          <span v-if='!loading'>读取信息</span>
          <span v-else>正在读取...</span>
        </Button>
      </i-col>
      </Row>
  </div>
</template>

<script>
import { upBase64 } from '@/api/common'
import { idcard } from '@/api/idcard'
export default {
  name: 'read-idcard',
  props: {
    isPlay: false
  },
  data () {
    return {
      errMsg: {
        show: false,
        msg: ''
      },
      mediaStreamTrack: Object,
      loading: false,
      is_photo: false,
      base64: '',
      cardInfo: Object,
      interfaceResult:
        {
          0: { mean: '成功', message: '二代身份证读取成功！', type: 'success' },
          1: { mean: '端口打开失败', message: '未检测到二代身份证阅读器！', type: 'warning' },
          2: { mean: '数据传输超时', message: '未检测到二代身份证阅读器！', type: 'error' },
          10: { mean: '没有找到卡', message: '未读取到身份证，请重新刷卡！', type: 'warning' },
          11: { mean: '读卡操作失败', message: '未检测到二代身份证阅读器！', type: 'error' },
          20: { mean: '自检失败', message: '二代身份证读取失败！', type: 'error' },
          30: { mean: '其他错误', message: '二代身份证读取失败！', type: 'error' },
          40: { mean: '相片解码失败', message: '二代身份证读取失败！', type: 'error' },
          100: { mean: '超时', message: '未读取到身份证，请重新刷卡！', type: 'warning' },
          200: { mean: 'GetBase64PhotoData', message: '二代身份证读取失败！', type: 'error' }
        }
    }
  },
  created () {},
  watch: {
    isPlay (bol) {
      if (bol === true) {
        this.newOpenCamera()
      } else {
        console.log('准备关闭摄像头')
        this.mediaStreamTrack.stop()
      }
    }
  },
  methods: {
    ShowInfo (op) {
      this.errMsg = { show: true, msg: op }
      let that = this
      setTimeout(function () {
        that.errMsg = { show: false, msg: '' }
      }, 3000)
    },
    readIdcardInfo () {
      this.loading = true
      this.getIdcard()
    },
    getIdcard () {
      let that = this
      idcard().then(data => {
        that.loading = false
        let json = Object
        if (typeof data.data === 'object') {
          json = data.data
        } else {
          json = evil(data.data)
          that.serverResult = json
          that.cardInfo = json.Certificate
          that.base64 = 'data:image/png;base64,' + json.Certificate.Base64Photo
        }
        that.$emit('ret-fun', json)
        if (json.ret !== 0) {
          that.ShowInfo(that.interfaceResult[data.data.ret])
        }
      }).catch(err => {
        that.loading = false
        that.ShowInfo('没有找到读卡设备')
        console.log(err, '错误信息')
      })
    },
    upimg () {
      let that = this
      let imgData = document.getElementById('canvas').toDataURL('image/png')
      let data = imgData.substr(22)
      upBase64(data).then(data => {
        that.loading = false
        that.$emit('img-result', data.data)
      })
    }
  }
}
</script>
